<template>
  <div>
    <span class="font-w font-16">商品信息</span>
    <div class="mar-t-20">
      <div class="flex font-color-black font-w font-14 ">
        <span class="flex-item text-align-c border-all pad-t-15 pad-b-16">平台商品明细</span>
        <span class="flex-item text-align-c border-all pad-t-15 pad-b-16">系统商品明细</span>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="自订单" width="119" />
          <el-table-column prop="name" label="商品名称" width="140" />
          <el-table-column prop="address" label="推广者" width="76" />
          <el-table-column prop="address" label="数量" width="78" />
          <el-table-column prop="address" label="商品金额" width="157" />
          <el-table-column prop="address" label="添加结果" width="109" />
          <el-table-column prop="address" label="商品名称" width="140" />
          <el-table-column prop="address" label="商品类型" width="162" />
          <el-table-column prop="address" label="操作" />
        </el-table>
        <div class="flex-col font-14 font-color-3 count-info-box mar-t-30">
          <span>货品总量: 1件</span>
          <span class="mar-t-2">商品金额: 60.00元</span>
          <span class="mar-t-3">运费: 10.00元</span>
          <span class="mar-t-5">合计: <span class="font-16 font-w" style="color: #FF500B">100.00</span>元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }
    ]
    return {
      tableData
    }
  }
})
</script>

<style scoped>
.font-color-black {
  color: #323233;
}
.count-info-box {
  align-items: end;
}
</style>
